<!--page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>-->
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%response.setHeader("Cache-Control","no-store");%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>管理系统用户登陆</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
<!-- 移动设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/amazeui.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/style/css/app.css">
<link
	href="${pageContext.request.contextPath}/style/css/bootstrap.min.css"
	rel="stylesheet">
<link rel="shortcut icon"
	href="${pageContext.request.contextPath}/style/i/icon/warehouse.png"
	type="image/x-icon" />

</head>

<body
	style="background-size: 100% 100%;background-image:url(${pageContext.request.contextPath}/style/i/background.jpg) ">
	
	
	<div class="am-animation-scale-up bg1"
		style="position: relative;left:500px; top: 120px;width:350px;height:430px; background: rgba(255,255,255, 0.5);">
		<form action="${pageContext.request.contextPath}/login/dologin" class="am-form-set am-form-horizontal"
			role="form" onsubmit="return sub();" method="post">
			<div style="position: relative;top: 10px;left:35%">
				<span style="color:white;font-size:25px">用户登录</span>
			</div>
			<div id="userdiv" class=" am-form-icon"
				style="position: relative;top: 25px;left:35px;width:80%">
				<i class="am-icon-user"></i> <input type="text"
					class="am-form-field " name="username" id="username" placeholder="用户名">
			</div>
			<div style="position: relative;top: 25px;left:120px">
				<span style="color:red;font-size:15px;font-weight:600"
					id="nousername">用户名不能为空</span>
			</div>
			<div id="passdiv"
				style="position: absolute;top:130px;left:35px;width:80%"
				class="am-form-group am-form-icon">
				<i class="am-icon-key"></i> <input type="password"
					class="am-form-field"name="password" id="password" placeholder="密码">
			</div>
			<div style="position:absolute;top:170px;left:120px">
				<span style="color:red;font-size:15px;font-weight:600" id="nopass">密码不能为空</span>
			</div>

			<div id="codediv" style="position:absolute;top:200px;left:35px;width:30%"
				class="am-form-group am-form-icon">
				<i class="am-icon-pencil"></i> <input id="inputcode" type="text"
					class="am-form-field" placeholder="验证码">
			</div>
			<div style="position:absolute;top:200px;left:180px;width:40%"
				class="am-form-group am-form-icon">
				<img id="codeimg" src="${pageContext.request.contextPath}/login/code">
				&nbsp;&nbsp;
				<a  href="javascript:changecode()">换一张</a>
			</div>
			<div style="position:absolute;top:240px;left:44px">
				<span style="color:red;font-size:15px;font-weight:600" id="errorcode">验证码错误</span>
			</div>
			
			<div style="position:absolute;top:280px;left:140px">
				<button type="submit" class="btn btn-primary">登录</button>
			</div>

		</form>

	</div>
	
</body>
<script src="${pageContext.request.contextPath}/style/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath}/style/js/jquery.base64.js"></script>
<!-- 包括所有已编译的插件 -->
<script
	src="${pageContext.request.contextPath}/style/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/style/js/amazeui.min.js"></script>
<script>
	$(document)
			.ready(
					function() {
						
						$("#nousername").hide();
						$("#nopass").hide();
						$("#nocode").hide();
						$("#errorcode").hide();
						//用户名输入框失去输入焦点
						$("#username").blur(
							function() {
								var name = $.trim($("#username").val());
								if (name == null || "" == name) {
									$("#userdiv").removeClass("am-form-success").addClass("am-form-error");
									$("#nousername").show();
											} else {
												$("#nousername").hide();
												$("#userdiv").removeClass("am-form-error").addClass("am-form-success");

									}
						});
						//密码失去输入焦点事件
						$("#password").blur(
							function() {
								var password = $.trim($("#password").val());
								if ("" == password) {
									$("#passdiv").removeClass("am-form-success").addClass("am-form-error");
									$("#nopass").show();
								} else {
									$("#passdiv").removeClass("am-form-error").addClass("am-form-success");
									$("#nopass").hide();
								}
						});
						$("#inputcode").blur(
							function(){
								var inputcode=$.trim($("#inputcode").val());
								if(inputcode==""||inputcode==null){
									alert("验证码不能为空");
								}else{
									$.ajax({
										type : "POST", //http请求方式    
										url : "${pageContext.request.contextPath}/login/checkcode",//发送给服务器的url    
										data : "inputcode="+ inputcode, //发送给服务器的参数  
										dataType:"json",
										success:function(res){
											if ($.trim(res.result) == "true") {
												$("#errorcode").hide();
												$("#codediv").removeClass("am-form-error").addClass("am-form-success");
											}else{
												$("#codediv").removeClass("am-form-success").addClass("am-form-error");
												$("#errorcode").show();
											}
										},
										error:function(){
											alert("error");
										}
									});
								}
							}
					);

					});
	/**
	表单提交验证
	 */
	function sub() {
		var flag=false;
		var code=$.trim($("#inputcode").val());
		if(""==code){
			flag=false;
			alert("验证码不能为空！");
			return false;
		}else if($("#errorcode").is(":visible")){
			alert("验证码错误");
			flag=false;
		}else{
			flag=true;
		}
		var name = $.trim($("#username").val());
		var password = $.trim($("#password").val());
		var flag1=false;
		var flag2=false;
		if ("" == name) {
			$("#userdiv").removeClass("am-form-success").addClass("am-form-error");
			$("#nousername").show();
			flag1=false;
		}else{
			flag1=true;
		}
		if ("" == password) {
			$("#passdiv").removeClass("am-form-success").addClass("am-form-error");
			$("#nopass").show();
			flag2=false;
		}else{
			flag2=true;
		}
		if(flag1&&flag2&&flag){
			setCookie();
			return true;
		}else{
			return false;
		}
	}

	/**
	设置cookie
	 */
	function setCookie() {
		var name = $.trim($("#username").val());
		var password = $.trim($("#password").val());
		var remeber = $("#rememberUser").attr("checked");
		if (remeber) {
			$.cookie("user_name", name);
			$.cookie("user_pwd", $.base64.encode(password));
		} else {
			$.cookie("user_pwd", null);
		}
	}

	/**
	获取cookie
	 */
	function getCookie() {
		var user_name = $.cookie("user_name");
		var user_pwd = $.cookie("user_pwd");
		if (user_name) {
			$("#username").val(user_name);
		}
		if (user_pwd) {
			$("#password").val($.base64.decode(user_pwd));
			$("#rememberUser").attr("checked", "true");
		}
	}
	
	/**
	更换图片验证码
	*/
	function changecode(){
		$("#codeimg").attr("src","${pageContext.request.contextPath}/login/code?id="+new Date().getTime());
	}
</script>
</html>




